<template>
  <div class="pc-holder inner-box">
    <!-- 持有人饼图 -->
    <holder-info :holderInfo="holderInfo"></holder-info>
    <!-- 表格部分 -->
    <el-table :data="HolderList" stripe style="width: 100%" class="data-table table-shadow">
      <el-table-column prop="rank" :label="$t('rank.rank')" width="200"></el-table-column>
      <el-table-column :label="$t('rank.adr')" width="550">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.address}`"
            class="light"
          >{{item.row.address}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="fee" :label="$t('rank.num')">
        <template slot-scope="item">{{item.row.balance/100000000}}</template>
      </el-table-column>
      <el-table-column :label="$t('rank.percent')" width="150">
        <template slot-scope="item">{{item.row.percent}} %</template>
      </el-table-column>
    </el-table>
    <!-- 底部分页 -->
    <div class="bottom-page flex-right">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.number"
        :pageSize="pages.size"
        :total="holderInfo.holders"
      ></page-container>
    </div>
  </div>
</template>

<script>
import HolderInfo from "./HolderInfo";
import PageContainer from "@/components/computer/PageContainer.vue";
import HolderBase from "@/mixins/Holder/holder.js";
export default {
  mixins: [HolderBase],
  components: {
    HolderInfo,
    PageContainer
  }
};
</script>

<style lang="scss">
.pc-holder {
  .data-table {
    margin-top: 30px;
    border-radius: 2px;
    border: 1px solid rgba(235, 239, 241, 1);
  }
  .bottom-page {
    margin-top: 23px;
  }
  .el-table td:nth-of-type(1) .cell {
    padding-left: 20px;
  }
}
</style>
